<template>
  <div class="person">
    <h3>用reactive</h3>
    <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changeBrand">修改汽车品牌</button>
    <button @click="changePrice">修改汽车价格</button>

    <button @click="changeCar">修改汽车</button>
    <br>
    <h3>用ref</h3>
    <h2>一辆{{ car2.brand }}车，价值{{ car2.price }}万</h2>
    <button @click="changeBrand">修改汽车品牌</button>
    <button @click="changePrice">修改汽车价格</button>

    <button @click="changeCar">修改汽车</button>
    <br />
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" v-bind:key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeFirstGame">修改第一个游戏的的名字</button>
    <h2>当前的攻击力{{ sum }}</h2>
    <button @click="changeSum">点我增加攻击力</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
};
</script>

<script lang="ts" setup>
import { reactive, ref } from "vue";

// 数据
let car = reactive({ brand: "奔驰", price: 100 });
let car2 = ref({ brand: "奔驰", price: 100 });

let games = ref([
  { id: "satr01", name: "王者荣耀" },
  { id: "satr01", name: "原神" },
  { id: "satr01", name: "三国杀" },
]);

let sum = ref(0);


// 方法
function changePrice() {
  car.price += 10;
  car2.value.price+=20
  console.log(car.price);
}

function changeBrand() {
  car.brand = '宝马';
  car2.value.brand='迈巴赫'
  console.log(car.brand);
}

// 
function changeCar() {

  Object.assign(car, { brand: '问界', price: 40 })

  car2.value = { brand: '保时捷', price: 300 }
}

// function changeCar() {



// car2.value = { brand: '问界', price: 40 }
// }

function changeFirstGame() {
  games.value[0].name = "洛克王国";
}

function changeSum() {

  sum.value += 1
}
</script>


<style scoped>
.person {
  background-color: rgb(131, 74, 1);
  box-shadow: 0 010px;
  border-radius: 10px;
  padding: 20px;
}

button {
  background-color: darkseagreen;
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>